<template>
	<section class="tip-wrap" ref="tipWrap" >
		<article class="tip-content">
			<slot>
				<p>{{mes}}</p>
			</slot>
		</article>
	</section>
</template>

<script>
	export default {
		name: 'tip',
		data () {
			return {
				mes: '提示框'
			}
		},
		props:['top', 'left', 'text'],
		methods: {

		},
		mounted () {
			// 初始化提示弹窗的位置
			this.$refs.tipWrap.style.top = this.top + 'px';
			this.$refs.tipWrap.style.left = this.left + 70 + 'px';
			
		},
		watch:{//当鼠标滑动的时候更新位置
			top: function (val, old) {
				this.$refs.tipWrap.style.top = val + 'px';
			},
			left: function (val, old) {
				this.$refs.tipWrap.style.left = val + 50 + 'px';
			},
		}
	}
</script>

<style lang="less">
	@import url("../../assets/css/variable.less");
	.tip-wrap{
		&{
			position: absolute;
			z-index: 99;
		}
	}
</style>
